<template>
    <div>
        <!-- <div class="flexbox flexcenter demands_group checked_list">
            <el-radio-group v-model="queryInfo.group" @change="getDataList">
                <el-radio :label="item.id" v-for="item in groupOption" :key="item.id">
                    <div class="demands_item">{{item.nickname}}</div>
                </el-radio>
            </el-radio-group>
        </div> -->
        <div class="tbox_line">
            <div class="tbox_head">项目列表</div>
            <el-table :data="tableData" class="com_table" height="700px">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="@/assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="" label="品牌/产品" min-width="100px">
                    <template slot-scope="scope">
                        <div class="table_brand">{{scope.row.brand_name}}</div>
                        <div class="table_product">{{scope.row.product_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="business_scene" label="业务场景" width="120px">
                    <template slot-scope="scope">
                        {{filters.chanelName2(scope.row.channel)}}-{{filters.sceneFilter(scope.row.business_scene)}}
                    </template>
                </el-table-column>
                <el-table-column prop="centre_name" label="核心创意人" min-width="200px">
                    <template slot-scope="scope">
                        {{scope.row.centre_uid.length>0?getText(scope.row.centre_uid).toString():"--"}}
                    </template>
                </el-table-column>
                <el-table-column prop="executor_uid" label="执行人" min-width="200px">
                    <template slot-scope="scope">
                        {{scope.row.executor_uid.length>0?getText(scope.row.executor_uid).toString():"--"}}
                    </template>
                </el-table-column>
                <el-table-column prop="quantity" label="需求数量" width="100px"></el-table-column>
                <el-table-column prop="product_num" label="状态" width="100px">
                    <template slot-scope="scope">
                        <!-- {{getStatus(scope.row)}} -->
                        <el-link type="success" :underline="false" v-if="getStatus(scope.row)">已完善</el-link>
                        <el-link type="danger" :underline="false" v-else>未完善</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="product_num" label="操作" width="220" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" :disabled="distribution==1" :underline="false" @click="editDemands(scope.row)">编辑需求</el-link>
                        <el-link type="primary" :disabled="distribution==1" :underline="false" @click="editProject(scope.row)" style="margin-left:10px">修改项目</el-link>
                        <el-link type="danger" :disabled="distribution==1" :underline="false" @click="deletDemands(scope.row)" style="margin-left:10px">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page_box flexbox flexcenter" style="padding:0">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: ["tableData", "total", "queryInfo","distribution"],
    name: "",
    data() {
        return {
            
        };
    },

    created() {},

    methods: {
        editDemands(row) {
            this.$emit("editDemands", row);
        },

        editProject(row){
            this.$emit("editProject", row);
        },

        getText(data) {
            let textList = [];
            for (let i in data) {
                let text = data[i].nickname + "x" + data[i].quantity;
                textList.push(text);
            }
            return textList;
        },

        getStatus(row) {
            var cyr = null;
            var zxr = null;
            for (let i in row.centre_uid) {
                cyr += Number(row.centre_uid[i].quantity);
            }
            for (let s in row.executor_uid) {
                zxr += Number(row.executor_uid[s].quantity);
            }
            return cyr + zxr + row.quantity == row.quantity * 3;
        },

        // 删除模板
        deletDemands(row) {
            this.$confirm("是否要删除该项目?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "adminapi/Demandszv2/demandProjectDelete",
                        {
                            id: row.id,
                            year: row.year,
                            week: row.week,
                            group:row.group
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.$emit("getDataList", this.queryInfo.page);
                    }
                })
                .catch(() => {});
        },
        

        getDataList(){
            this.$emit("getDataList", 1);
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.$emit("getDataList", 1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.$emit("getDataList", val);
        },
    },
};
</script>
<style scoped>
.tbox_head{
    line-height: 60px;
    font-size: 16px;
    color: #17233d;
}
.tbox_line{
    padding: 0 12px;
    border: 1px solid #ebebeb;
    border-radius: 6px;
}
.demands_group {
    height: 60px;
}
.demands_item {
    height: 30px;
    line-height: 30px;
    background: rgba(165, 177, 209, 0.05);
    border-radius: 4px;
    min-width: 55px;
    padding: 0 9px;
    font-size: 13px;
    color: #616C85;
    cursor: pointer;
    text-align: center;
    margin-right: 12px;
}

.checked_list .el-radio .demands_item {
    margin-right: 0;
}

.demands_item.active,
.checked_list .el-radio.is-checked .demands_item {
    background: rgba(22, 93, 255, 0.1);
    color: #4475ff;
}
</style>

